<template>
	<view class="order-mark-container page-container">
		<view class="nannie-box">
			<view class="nannie-avatar">
				<lazy-image :src="$img_base_url(skillInfo.image)"></lazy-image>
			</view>
			<view class="nannie-content">
				<view class="nannie-nickname">
					<text>{{skillInfo.name}}  为您服务</text>
				</view>
				<!-- <view class="nannie-rate">
					<text>服务评分：</text>
					<text style="color: #FFA33A;">95.0</text>
				</view> -->
			</view>
		</view>
		<view class="order-info-box margin-top-30">
			<view class="order-no">
				<text>订单编号：{{orderId}}</text>
			</view>
			<view class="service-name mt-20">
				<text>预约服务：{{name}}</text>
			</view>
			<view class="order-rate-box">
				<view class="order-rate-item">
					<view class="left">
						<text>总体</text>
						<uni-rate v-model="score"></uni-rate>
					</view>
					<view class="right">
						<text>{{status[score-1]}}</text>
					</view>
				</view>
				<view class="order-rate-item">
					<view class="left">
						<text>服务</text>
						<uni-rate v-model="fw_score"></uni-rate>
					</view>
					<view class="right">
						<text>{{status[fw_score-1]}}</text>
					</view>
				</view>
				<view class="order-rate-item">
					<view class="left">
						<text>着装</text>
						<uni-rate v-model="zz_score"></uni-rate>
					</view>
					<view class="right">
						<text>{{status[zz_score-1]}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="order-mark-box">
			<view class="title">
				<text>我的评价</text>
			</view>
			<view class="textarea-box">
				<textarea class="textarea" v-model="content" placeholder="说说您对服务的评价"></textarea>
			</view>
		</view>
		
		<view class="order-upload-box">
			<view class="order-upload-btn" v-for="(item,i) in images" :key="i">
				<image :src="$img_base_url(item)" mode="widthFix"></image>
				<view class="close">
					<image @click="delImg(i)" :src="$img_path('/home/detail/upload-close.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="order-upload-btn" @click="upload">
				<image :src="$img_path('/order/upload.png')" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="submit-box">
			<view class="display-flex alig" style="font-weight: bold;font-size: 32rpx;color: #333333;" @click="checkHide">
				<view class="check-submit-image">
					<image v-if="is_hide==1" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
					<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
				</view>
				匿名提交
			</view>
			<view class="submit-btn common-btn-bg-color" @click="submitForm">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {commentadd} from '@/utils/api/serviceApi.js'
	import { upload } from "@/utils/api/public.js"
	export default {
		data() {
			return {
				order_id:0,
				skillInfo:{},
				orderId:'',
				name:'',
				score:5,
				fw_score:5,
				zz_score:5,
				status:['非常差','差','一般','满意','非常满意'],
				is_hide:0,
				images:[],
				content:''
			}
		},
		onLoad(options) {
			this.order_id = options.id
			this.skillInfo = JSON.parse(options.skill)
			this.orderId = options.orderId
			this.name = options.name
		},
		methods: {
			upload(){
				const that = this
				wx.chooseMessageFile({
					count: 1, //默认100
					type: "image",
					success: function(res) {
						console.log(res);
						const _file = res.tempFiles[0]
						upload({
							file: _file.path
						}).then(response => {
							console.log("上传成功", response)
							const url = response.data.url
							that.images.push(url)
						})
					}
				});
			},
			checkHide(){
				if(this.is_hide==0){
					this.is_hide=1
				}else{
					this.is_hide=0
				}
			},
			delImg(i){
				this.images.splice(i,1)
			},
			submitForm(){
				let obj = {
					order_id:this.order_id,
					content:this.content,
					images:this.images.join(','),
					score:this.score,
					fw_score:this.fw_score,
					zz_score:this.zz_score,
					is_hide:this.is_hide
				}
				uni.showLoading()
				commentadd(obj).then(res=>{
					uni.hideLoading()
					if(res.code==1){
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.order-mark-container {
	padding: 32rpx 22rpx;
	padding-bottom: 300rpx;
	min-height: 100vh;
	background-color: #fff;
}

.nannie-box {
	display: flex;
	// align-items: center;
	justify-content: space-between;
	
	.nannie-avatar {
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.nannie-content {
		flex: 1;
		padding-left: 20rpx;
		
		.nannie-nickname {
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
		
		.nannie-rate {
			font-weight: 400;
			font-size: 28rpx;
			color: #464646;
			margin-top: 14rpx;
		}
	}
}

.order-info-box {
	.order-no {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	
	.service-name {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}
	
	.order-rate-box {
		margin-top: 32rpx;
		.order-rate-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 48rpx;
			
			.left {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				
				text {
					margin-right: 42rpx;
				}
			}
			
			.right {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
}


	
.order-mark-box {
	margin-top: 20rpx;
	
	.title {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	
	.textarea-box {
		margin-top: 20rpx;
		.textarea {
			width: 706rpx;
			height: 198rpx;
			background: #F5F5F5;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			box-sizing: border-box;
			padding: 16rpx 20rpx;
		}
	}
}

.order-upload-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 30rpx;
	
	.order-upload-btn {
		width: 146rpx;
		height: 146rpx;
		&:not(:nth-child(4n)){
			margin-right: 20rpx;
		}
		&>image{
			width: 100%;
			height: 100%;
		}
		position: relative;
		&>.close{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 0;
			top: 0;
			transform: translateX(50%) translateY(-50%);
		}
	}
}

.submit-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 30rpx 22rpx;
	padding-bottom: 60rpx;
	background-color: #fff;
	
	.check-submit-image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}
	
	.submit-btn {
		width: 100%;
		height: 96rpx;
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 38rpx;
	}
}
</style>
